<template>
  <div class="home-page">
    <h1>首页</h1>
    <div class="weibo-list">
      <dl v-for="i in list" :key="i.id" class="weibo-item">
        <dd>
          <img :src="'http://localhost:82/my/static/wbimg/java实训' + i.img" alt="Example Image" class="weibo-image">
        </dd>
        <dt class="weibo-title">{{ i.title }}</dt>
        <dd class="weibo-date">{{ formatDate(i.createtime) }}</dd>
        <dd class="weibo-author">作者：{{ i.author }}</dd>
        <dd class="weibo-content" style="height: 100px; overflow: hidden;">{{ i.content }}</dd>
        <dd class="weibo-actions">
          <router-link :to="{ name: 'weiboDetail', params: { id: i.id } }">
            <el-button type="primary" class="detail-btn">详情</el-button>
          </router-link>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script setup>
import { reactive,onMounted,ref } from 'vue';
import axios from 'axios';

function formatDate(dateString) {
  const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
  return new Date(dateString).toLocaleDateString('zh-CN', options);
}

const list=ref([])
onMounted( async()=>{
    const response = await axios.get("http://localhost:82/my/ajax/index");
    list.value=response.data.date;
})


</script>
<style scoped>
.home-page {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.weibo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.weibo-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  padding: 15px;
  margin-bottom: 20px;
}

.weibo-image {
  width: auto;
  height: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.weibo-title {
  font-size: 1.2em;
  margin: 0 0 5px;
  color: #333;
}

.weibo-date {
  font-size: 0.9em;
  color: #777;
  margin: 0 0 5px;
}

.weibo-author {
  font-size: 0.9em;
  color: #777;
  margin: 0 0 5px;
}

.weibo-content {
  font-size: 1em;
  color: #333;
  margin: 0 0 15px;
}

.weibo-actions {
  text-align: right;
}

.detail-btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.detail-btn:hover {
  background-color: #45a049;
}
</style>
<style scoped>
.home-page {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.weibo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.weibo-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  padding: 15px;
  margin-bottom: 20px;
}

.image-container {
  max-width: 300px; /* 限制图片容器的最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

.weibo-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
  object-fit: cover; /* 确保图片按比例填充容器 */
  max-height: 200px; /* 设置最大高度 */
}

/* 响应式设计 */
@media (max-width: 600px) {
  .weibo-image {
    max-height: 150px; /* 在较小屏幕上减小高度 */
  }
}

@media (min-width: 900px) {
  .weibo-image {
    max-height: 250px; /* 在更大屏幕上增加高度 */
  }
}
</style>